<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>搜索</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-bar-nav~.mui-content { padding-top: 54px;}
			.mui-bar-nav { background: #fdd100;}
			.mui-input-row { clear: none;}
			.mui-input-row .mui-icon-clear { right: 70px !important; top: 4px !important;}
			.mui-pull-left { color: #000;}
			#search_form { padding-top: 8px; }
			#search { border: 0 !important; float: left; width: 74%; height: 30px; line-height: 30px; color: #999; font-size: 12px; background: #fff; border-radius: 3px; overflow: hidden; padding-left: 6px; margin-left: 12px;  }
			.search_btn { position: absolute !important; top: 8px !important; right: 0 !important; padding: 5px 12px !important; background: none !important; border: 0 !important; color: #000 !important;  }
			.mui-content h3 { font-size: 16px; padding:0 10px; font-weight: normal;}
			.mui-content h3 .mui-icon { color: #FA9101; margin-right: 4px;}
			.mui-content ul { overflow: hidden;}
			.mui-content ul li { width: 50%; float: left; margin-bottom: 14px; font-size: 14px; list-style-type: decimal !important;}
			.mui-content ul li a { color: #666; display: block;}
			@media only screen and (min-width: 360px) {
				#search { width: 78%;}
			}
			@media only screen and (min-width: 412px) {
				#search { width: 80%;}
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <div id="search_form" class="mui-input-row">
		    	<input type="text" name="" id="search" value="" class="mui-input-clear" placeholder="搜索视频，舞曲，达人" />
		    	<input type="submit" class="search_btn" value="搜索"/>
		    </div>
		</header>
		<div class="mui-content">
			<h3><span class="mui-icon mui-icon-settings"></span>热门搜索</h3>
			<ul>
				<li><a>鬼步舞</a></li>
				<li><a>16步</a></li>
				<li><a>广场舞</a></li>
				<li><a>探戈</a></li>
				<li><a>鬼步舞</a></li>
				<li><a>16步</a></li>
				<li><a>广场舞</a></li>
				<li><a>探戈</a></li>
			</ul>
			<h3><span class="mui-icon mui-icon-compose"></span>历史搜索</h3>
			<ul>
				<!--<li><a>鬼步舞</a></li>
				<li><a>16步</a></li>
				<li><a>广场舞</a></li>
				<li><a>探戈</a></li>-->
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/zepto.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			var nativeWebview, imm, InputMethodManager;
			var initNativeObjects = function() {
			    if (mui.os.android) {
			        var main = plus.android.runtimeMainActivity();
			        var Context = plus.android.importClass("android.content.Context");
			        InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
			        imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
			    } else {
			        nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
			    }
			};
			var showSoftInput = function() {
			    if (mui.os.android) {
			        imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
			    } else {
			        nativeWebview.plusCallMethod({
			            "setKeyboardDisplayRequiresUserAction": false
			        });
			    }
			    setTimeout(function() {
			       //此处可写具体逻辑设置获取焦点的input
			       var inputElem = document.querySelector('input');
			              inputElem.focus(); 
			    }, 200);
			};
			mui.plusReady(function() {
			    initNativeObjects();
			    showSoftInput();
			    loadAll();
			    $("#search_form").on("tap",".search_btn",function(){
					var search_text = $("#search").val();
					save();
					mui.openWindow({
					    url: 'search_end.html', 
					    extras:{
							search_text:search_text
						}
					});
				});
				$(".mui-content").on("tap","a",function(){
					var search_text = $(this).text();
					mui.openWindow({
					    url: 'search_end.html', 
					    extras:{
							search_text:search_text
						}
					});
				});
			});
//			//保存数据
	        function save(){
//	        	localStorage.clear("search_old_text");
	        	var search_old_text = localStorage.getItem("search_old_text");
	            var search_new_text = $("#search").val();
	            if(search_new_text){
	            	if(!search_old_text){
	            		search_old_text = [];
		            }else{
		            	search_old_text = search_old_text.split(",");
		            }
		            if(search_old_text.indexOf(search_new_text)<0){
		            	search_old_text.unshift(search_new_text);
	            		localStorage.setItem("search_old_text",search_old_text);
		            }
	            }
	            loadAll();
	        }
//	        //将所有存储在localStorage中的对象提取出来，并展现到界面上
	        function loadAll(){
	            if(localStorage.length>0){
	            	var li_html ="";
	            	var search_old_text = localStorage.getItem("search_old_text");
	            	if(search_old_text){
	            		search_old_text= search_old_text.split(",");
	            		$.each(search_old_text, function(index, item){
	            			li_html += "<li><a>"+search_old_text[index]+"</a></li>";
						})
	            		$(".mui-content ul").eq(1).html(li_html);
	            	}
	            	
	            }
	        }
		</script>
	</body>

</html>